<!-- 发放抵用券 -->
<template>
	<app-layout>
		<view class="contetn">
			<!-- <view class="a-image">
				<image class="image" :src="topimginfo.icon_url" mode="widthFix"></image>
			</view> -->
			<view class="release">
				<!-- :style="{bottom:emptyHeight + 'rpx'}" -->
				<view class="releasebt" @click="addcop">创建抵用券</view>
			</view>
			<!-- <view class="follow" v-for="(item,index) in list" :key="index">
				<image class="avatar" :src="item.user.userInfo.avatar" mode=""></image>
				<view class="nickname u-line-4">
					{{item.user.nickname}}
				</view>
				<view class="dir-top-wrap cross-center">
					<button class="reviewed" open-type="share">分享到群</button>
					<view class="">
						已有{{item.shownums}}人领取
					</view>
				</view>
			</view> -->
			<u-popup :customStyle="custyle" v-model="isshoe" mode="center" :maskCloseAble="false" border-radius="14"
				:safeAreaInsetBottom="true" @close="closez">
				<view class="gold-model" @touchmove.stop.prevent>
					<view class="closegold" @click="closez">
						关闭<image src="/static/image/close.png" mode=""></image>
					</view>
					<view class="release-one dir-left-nowrap cross-center">
						<view class="">
							自定义分享标题
						</view>
						<input type="text" class="box-grow-1 input" @input="cusinput" v-model="custitle"
							placeholder="请填写分享标题" style="padding: 0 12rpx;">
					</view>
					<view class="release-one dir-left-nowrap cross-center">
						<view class="fname">分享图片</view>
						<view class="input">
							<view class="logoStore" v-if="isimg == true">
								<view mode="aspectFill" @click='remove(0)' class='remove cross-center main-center'>x
								</view>
								<image class="image" :src="shareimg" @click='previewImage(0)'></image>
							</view>
							<app-upload-image @cancelon="can" v-else height="170" minheight="170" :isimg="false"
								:value="shareimg" :showNumber="false" @image-event="uploadImg" maxNum="1" margin="0">
							</app-upload-image>
						</view>
					</view>
					<view class="gold-use" :class="['u-checked ' + themeObject.back]">
						<button class="release-two" open-type="share">点击此按钮转发到群</button>
					</view>
				</view>
			</u-popup>
			<view class="card-list">
				<view v-for="item in list" :key="item.id">
					<view class="card-item dir-top-nowrap main-center">
						<!-- <image class="card-img" :src="item.pic_url"></image> -->
						<view class="name">{{item.name}}{{item.sub_price}}元抵用券</view>
						<view class=''>
							创建时间:{{item.created_at}}
						</view>
						<view class=''>
							总共有{{item.total_count}}张抵用券,已有{{item.count}}张被领取
						</view>
						<view class="dir-left-wrap cross-center">
							<!-- <button :data-id="item.id" class="reviewed" open-type="share">分享到群</button> -->
							<view class="reviewed" @click="sharetoqun(item.id)">
								分享到群
							</view>
						</view>
						<!-- <view class="right-box dir-top-nowrap main-center cross-center">
							<span>查看抵用券详情</span>
						</view> -->
					</view>
				</view>
			</view>
			<view class="nopt" v-if="list.length == 0">
				暂无
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex";
	import uPopup from '../../../components/basic-component/u-popup/u-popup.vue';
	import appUploadImage from '../../../components/basic-component/app-upload-image/app-upload-image'
	export default {
		components: {
			uPopup,
			appUploadImage
		},
		data() {
			return {
				page: 2,
				limit: 20,
				pagecount: 1,
				list: [],
				isexamine: false, // 是否审核
				isadopt: true, // 是否通过
				isrelease: false, // 是否发放

				mall_id: 1,
				topimginfo: '',
				imglist: '',

				custyle: {
					'background': 'rgba(226, 226, 226, 0.03)',
				},
				custitle: '',
				isshoe: false,

				shareimg: '', // 分享图片
				isimg: false,
				upvipic: false,
				dyqid: 0
			}
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage']
			})
			// #endif
			// this.mall_id = options.mall_id || 1
			// console.log(this.mall_id);
			// this.onReq(253)
			// this.onReq(255)
			// this.loadList()
			/* if (options.mall_id) {
				this.mall_id = options.mall_id
				this.loadList()
			} else {
				this.$request({
					url: this.$api.wechat_group.whether_binding
				}).then(res => {
					if (res.data.ismallbingding) {
						this.mall_id = res.data.ismallbingding.id
						this.loadList()
					}
				}).catch(err => {

				})
			} */
		},
		onShow() {
			this.loadList()
		},
		onShareAppMessage(e) {
			this.isshoe = false
			/* let qparams = {
				path: '/pages/showindex/forward',
				params: {
					sharerid: this.userInfo.options.user_id,
					mall_id: this.mall_id,
					issharequn: 1
				}
			}
			if (this.imglist != '') {
				qparams = {
					path: '/pages/showindex/forward',
					imageUrl: this.imglist,
					params: {
						sharerid: this.userInfo.options.user_id,
						mall_id: this.mall_id,
						issharequn: 1
					}
				}
			} */
			/* return this.$shareAppMessage({
				path: '/pages/user-center/groupcoup/groupcoup',
				imageUrl: this.imglist == '' ? '' : this.imglist,
				params: {
					sharerid: this.userInfo.options.user_id,
					mall_id: this.mall_id,
					issharequn: 1
				}
			}); */
			return this.$shareAppMessage({
				path: '/pages/consumer/getcoupon/getcoupon',
				title: this.custitle == '' ? '' : this.custitle,
				imageUrl: this.shareimg == '' ? '' : this.shareimg,
				params: {
					// couponid: e.target.dataset.id,
					couponid: this.dyqid,
					userid: this.userInfo.options.user_id
				}
			});
		},
		/* onShow() {
			this.list = []
			this.page = 1
			this.pagecount = 1
			this.loadList()
		}, */
		onReachBottom() {
			this.getMore()
			/* if (this.pagecount > this.page) {
				this.page++
				this.loadList()
			} */
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
			...mapGetters('iPhoneX', {
				BotHeight: 'getBotHeight',
				emptyHeight: 'getEmpty',
			}),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			})
		},
		methods: {
			sharetoqun(id) {
				this.isshoe = true;
				this.dyqid = id
			},
			closez() {
				this.isshoe = false
			},
			cusinput(e) {
				this.custitle = e.detail.value
			},
			uploadImg(e) {
				this.shareimg = e.imageList[0]
			},
			can(e) {
				this.upvipic = e
			},
			remove(index) {
				this.shareimg = ''
				this.isimg = false
			},
			previewImage(index, udxnum) {
				this.upvipic = true
				uni.previewImage({
					current: this.shareimg,
					urls: this.shareimg.split(',')
				})
			},
			addcop() {
				uni.navigateTo({
					url: '/pages/consumer/addcoupon/addcoupon'
				})
			},
			toDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: '/pages/consumer/coupondetail/coupondetail?id=' + item.id
				})
			},
			loadList() {
				this.$request({
					url: this.$api.voucher.manage,
					data: {
						user_id: this.userInfo.options.user_id
					}
				}).then(res => {
					// this.list = this.list.concat(res.data.list)
					this.list = res.data.list
					// this.pagecount = res.data.pagination.page_count
				}).catch(err => {})
			},
			getMore() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
				});
				that.$request({
					url: that.$api.voucher.manage,
					data: {
						page: that.page,
						user_id: that.userInfo.options.user_id
					},
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						if (response.data.list.length > 0) {
							that.loading = null;
							that.list = that.list.concat(response.data.list);
							that.page++;
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000,
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.gold-model {
		// background: rgba(#eb0f13, .1);
		background: #fff;
		width: 670rpx;
		padding: 36rpx;
		font-size: 36rpx;
		line-height: 72rpx;

		// font-weight: bold;
		.input {
			flex: 1;
		}

		.closegold {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 30rpx;
			}
		}

		.gold-use {
			text-align: center;

			&.unchecked {
				background-color: #8f8f8f;
				color: #FFFFFF;
			}
		}

		.release-one {
			font-size: 32rpx;
			font-weight: 300;
			min-height: 80rpx;
			// line-height: 80rpx;
			// padding: 16rpx;
			border-bottom: 1rpx solid #FFFFFF;
			text-align: left;
		}

		.release-two {
			color: #fff;
			background: #ff2600;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 12rpx;
		}
	}

	.logoStore {
		width: 170rpx;
		height: 170rpx;
		position: relative;

		.remove {
			width: 40#{rpx};
			height: 40#{rpx};
			position: absolute;
			right: -16rpx;
			top: -10rpx;
			background: #333333;
			color: #fff;
			border-radius: 50%;
			padding-bottom: 8#{rpx};
			font-size: 24#{rpx};
		}

		.image {
			width: 100%;
			height: 100%;
		}

		&.bg {
			background: #F4F4F4;
			position: relative;
		}

		.logoStore-hor {
			position: absolute;
			width: 80rpx;
			height: 2rpx;
			left: 48rpx;
			top: 87rpx;
			background: #FFFFFF;
		}

		.logoStore-ver {
			position: absolute;
			width: 80rpx;
			height: 2rpx;
			left: 48rpx;
			top: 87rpx;
			background: #FFFFFF;
			transform: rotate(90deg);
		}
	}

	.a-image {
		width: 100%;
		position: relative;
		color: #FFFFFF;
		font-size: 28rpx;

		.all-num {
			position: absolute;
			bottom: 10rpx;
			left: 5rpx;
		}

		.all-mx {
			position: absolute;
			bottom: 10rpx;
			right: 5rpx;
		}

		.image {
			width: 100%;
		}
	}

	.release {
		position: fixed;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: 100;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		background: #FFFFFF;
		width: 100%;
		height: 120rpx;

		.releasebt {
			border-radius: 10rpx;
			background: #d07743;
			color: #fff;
			width: 710rpx;
			height: 80rpx;
			margin: 20rpx auto;
			line-height: 80rpx;
		}
	}

	.befbutton {
		background: #342B2A;
		width: 100%;
		height: 168rpx;
		overflow: hidden;
	}

	.fbutton {
		border-radius: 0;
		width: 100%;
		height: 168rpx;
		line-height: 168rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}

	.bgbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}

	.contetn {
		// background-color: #FFFFFF;
		width: 100%;
		height: 100%;
		// padding: 0 24rpx;
	}

	.card-list {
		width: 100%;
		padding-top: #{10rpx};
		background-color: #f7f7f7;
		margin-bottom: 120rpx;

		.reviewed {
			font-size: 28rpx;
			// height: 60rpx;
			line-height: 60rpx;
			margin: 0;
			padding: 0 20rpx;
			border: 1rpx solid #dcdcdc;
			border-radius: 12rpx;
			background: #ff9b61;
			color: rgba(0, 0, 0, 0.6);
		}
	}

	.card-item {
		// height: #{180rpx};
		margin: #{20rpx};
		padding: 24rpx 36rpx;
		// background-color: #fff;
		background-color: #d07743;
		color: #FFFFFF;
		// color: #353535;
		font-size: 24rpx;
		border-radius: 16#{rpx};
		line-height: 52rpx;

		.name {
			font-size: 32rpx;
			padding-bottom: 16rpx;
			border-bottom: ridge #ff9b61;

			.is_send {
				width: #{80rpx};
				height: #{40rpx};
				color: #ff4544;
				font-size: #{20rpx};
				background-color: #ffecec;
				text-align: center;
				line-height: #{40rpx};
				margin: #{16rpx 0 20rpx 0};
			}
		}

		.card-img {
			height: #{88rpx};
			width: #{88rpx};
			border-radius: 50%;
			margin-left:24#{rpx};
		}

		.right-box {
			margin: #{65rpx} #{35rpx};

			.card-qr {
				height: #{50rpx};
				width: #{50rpx};
			}

			span {
				font-size:20#{rpx};
				color: #353535;
				margin-top:10#{rpx};
			}
		}
	}

	.follow {
		width: 100%;
		display: flex;
		align-items: center;
		height: 170rpx;
		font-size: 28rpx;
		font-weight: 700;
		justify-content: space-between;
		position: relative;
		padding: 0 12rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;

		}

		.nickname {
			flex: 1;
			padding: 0 20rpx;
		}

		.f-gold {
			padding: 0 12rpx;
		}

		.reviewed {
			font-size: 28rpx;
			height: 60rpx;
			line-height: 60rpx;
			// padding: 10rpx 20rpx;
			border: 1rpx solid #dcdcdc;
			border-radius: 12rpx;
		}

		.tips {
			position: absolute;
			top: 5rpx;
			right: 12rpx;
			font-size: 24rpx;
			color: #353535;
		}

		.approved {
			color: #279e1a;
		}

		.approvedf {
			color: #cf0000;
		}
	}

	.follow+.follow {
		border-top: 1rpx solid #dcdcdc;
	}

	.nopt {
		text-align: center;
		line-height: 360rpx;
		font-size: 24rpx;
	}
</style>
